<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#username").blur(function(){
				//1.获取用户名输入狂的值
				var name = $("#username").val();
				//2.非空校验  && 长度校验
				if(name.trim().length > 20  || name.trim().length < 3){
					$("#msg").text("用户名长度在3~20位之间！").css("color","red");
					return;
				}
				//3.校验没有问题，开始异步访问后台校验是否存在该用户名
				var json = {"username":name};
				$.ajax({
					url:"UserServlet?method=ajaxValidateUsername",
					dataType:"json",
					async:true,
					data: JSON.stringify(json),
					type:"post",
					contentType:"application/json;charset=utf-8",
					success:function(data){
						if(data){
							$("#msg").text("√").css("color","green");
							return;
						}else{
							$("#msg").text("改用不存在，别瞎弄！").css("color","red");
							return;
						}
					}
				});
				
			});	
		
		
		});
	
	
	</script>


</head>
<body>





	<div id="msg"></div>
	<form action="UserServlet" method="post">
		<input type="text" name="username" id="username"/>
		<br/>
		<input type="submit" value="提交"/>
	</form>





</body>
</html>